@charset "UTF-8";
@import url('displaFlex');





@safeWidth:1100px;        //安全宽度

@safeMainColor:#01cbe9;       //主题颜色
@safeMinorColor:#ff6f6e;       //主题颜色

@borderColor:#dcdcdc;     //边框颜色
@25mainWordColor:#252525;   //文字主体颜色
@4aviceWordColor:#4a4a4a;   //文字副级颜色
@99minorWordColor:#999999;  //文字次要颜色


.w_h(@w_h){
  width: @w_h ;
  height: @w_h ;
}

//文字溢出
//多行
.wordSpaceClamp(@number){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@number;
  overflow: hidden;
}
//单行
.wordSpaceClamp{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.hover(@color){
  &:hover{
    background-color: @color;
    color: #FFFFFF;
    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    transition: all 1s cubic-bezier(0, 0.72, 0.35, 1.12);
  }
}




nav{
  border-bottom: 1px solid @borderColor;
}

//面包屑导航
.nav{
  width: @safeWidth;
  margin:20px auto;
  a{
    font-size: 16px;
    color: #4a4a4a;
  }
  :nth-child(1){
    padding-right: 15px;
    background: url("../publicImg/jiantou-you-hui@2x.png") no-repeat right;
    background-size: 6px 11px;
    margin-right: 10px;
  }
}


main{
  width: @safeWidth;
  margin: 0 auto;
  .topInfo{
    width: @safeWidth;
    height: 340px;
    background: url("../publicImg/gerenzhongxin-beijing@2x.png") no-repeat center;
    background-size:contain;
    margin-bottom: 40px;
    .displayFlex;
    .flex-direction-column;
    .flex-justify-align;
    .userImg{
      border:3px solid #ffffff;
      border-radius: 50%;
      .w_h(127px);
      margin-bottom: 26px;
    }
    .userName{
      font-size:24px;
      color: #FFFFFF;
      padding-right: 30px;

    }
    .sexman{
      background: url("../publicImg/nan-icon@2x.png") no-repeat right;

    }

    .sexnv{
      background: url("../publicImg/nan-icon@2x.png") no-repeat right;

    }

    .userRank{
      .displayFlex;
      .flex-direction-row;
      margin-top: 7px;
      margin-bottom:40px;
      span{
        font-size: 16px;
        color: #ffffff;
        display: block;
      }
      .rankName{
        padding-right: 30px;
        background: url("../publicImg/huizhang/1.png") no-repeat right;
        background-size: 20px 20px;
      }
      .rankImg{
        margin-left: 10px;
        width: 20px;
        height: 20px;
        img{
          display: block;
          width: 20px;
          height: 20px;
        }
      }

    }
    .userOther{
      .displayFlex;
      .flex-direction-row;
      .flex-justify-between;
      .fans,.focus,.point{
        width: 160px;
        height: 40px;
        font-size: 16px;
        color:#fff;
        .displayFlex;
        .flex-direction-column;
        .flex-justify-align;
        line-height: 20px;
        cursor: pointer;

      }


    }




  }
  .navList{
    .displayFlex;
    .flex-direction-row;
    .flex-justify-between;

    .leftBox{
      width: 310px;
      height: 720px;
      padding-top: 70px;
      border:1px solid @borderColor;
      border-radius: 6px;
      background-color: #f6f6f6;
      font-size: 18px;
      .displayFlex;
      .flex-direction-column;
      span{
        color: @99minorWordColor;
        width: 215px;
        height: 56px;
        margin-left:84px;
        margin-bottom: 28px;
        padding-left:34px;
        text-align: left;
        line-height: 56px;
        cursor:pointer;
      }
      .clickSpan{
        color:@4aviceWordColor;
        background-color: white;
      }

    }
    .rightBox{
      width:760px;
      .rightTitle{
       .displayFlex;
        .flex-direction-row;
        .flex-align-items;
        margin-bottom:30px;
        p{
          font-size:18px ;
          height: 24px;
          line-height: 24px;
          color:@4aviceWordColor;
          padding-left: 7px;
          border-left: 3px solid @safeMinorColor;

        }

      }
      .rightInnerList{
        width: 100%;
        min-height: 696px;
        //**********
        //**********
        ////***********我的粉丝
        //.myFansList{
        //  padding: 10px 20px 30px 20px;
        //  min-height: 696px;
        //  border:1px solid @borderColor;
        //  border-radius: 6px;
        //  .fansItem{
        //    width:720px;
        //    height: 110px;
        //    border-bottom: 1px dashed @borderColor;
        //
        //    position: relative;
        //
        //    .displayFlex;
        //    .flex-direction-row;
        //    .flex-align-items;
        //    .fansImg{
        //      .w_h(72px);
        //      border-radius: 4px;
        //      margin-right: 16px;
        //    }
        //
        //    .fansInfo{
        //      .displayFlex;
        //      .flex-direction-column;
        //      .fansNameRank{
        //        .displayFlex;
        //        .flex-direction-row;
        //        .flex-align-items;
        //        .fansName{
        //          font-size: 20px;
        //          color:@25mainWordColor;
        //        }
        //        .img{
        //          height: 20px;
        //          width: 20px;
        //        }
        //      }
        //      .fansPostComment{
        //        .displayFlex;
        //        .flex-direction-row;
        //        span{
        //          font-size: 16px;
        //          color:@99minorWordColor;
        //        }
        //        .postNumber{
        //          margin-right: 30px;
        //        }
        //
        //      }
        //    }
        //
        //
        //    .guanzhuBtn{
        //      width:110px;
        //      height: 40px;
        //      border:1px solid @safeMinorColor;
        //      color:@safeMinorColor;
        //      position: absolute;
        //      right: 0;
        //      top: 37px;
        //      font-size: 16px;
        //      border-radius: 4px;
        //
        //    }
        //    .clickGuanzhuBtn{
        //      border:1px solid #eeeeee;
        //      color:@99minorWordColor;
        //    }
        //  }
        //}


        //**********
        //**********
        //***********积分制度


        .pointInfo{
          .displayFlex;
          .flex-direction-column;
          .tab{
            .displayFlex;
            .flex-direction-row;
            margin-bottom: 20px;

            span{
              font-size: 16px;
              color: @4aviceWordColor;
              margin: 0 15px;
              cursor: pointer;
            }
            .addcolor{
              color:@safeMinorColor;
            }


          }

          .myPointRankList{
            .displayFlex;
            .flex-direction-column;
            width:712px;
            padding: 0 24px;
            min-height:390px;
            border:1px solid @borderColor;
            border-radius: 6px;
             background-color: white;
            .pointTopInfo{
              .displayFlex;
              .flex-align-items;
              height: 60px;

              span{
                color: @25mainWordColor;
                font-size: 14px;
                width: 237px;
                .flex-justify-align;

              }


            }


            .rankItem{
              .displayFlex;
              .flex-align-items;
              height: 98px;
              background-color: #f0fcfe;
              border-radius: 4px;
              margin-bottom: 10px;

              span{
                color: @25mainWordColor;
                font-size: 14px;
                width: 237px;
                height: 100%;
                .flex-justify-align;
                img{
                  .w_h(75px)
                }
              }
            }

            .rankItem0{
              .displayFlex;
              .flex-align-items;
              height: 98px;
              margin-top: 70px;
              background-color: #fcfcfc;
              border-radius: 4px;
              margin-bottom: 10px;

              span{
                color: @25mainWordColor;
                font-size: 14px;
                width: 237px;
                height: 100%;
                .flex-justify-align;
                img{
                  .w_h(75px)
                }
              }
              position: relative;
              &:before {
                  position: absolute;
                  top: -60px;
                  left: 340px;
                  content: '';
                  height: 40px;
                  width: 2px;
                  border-left: 2px solid @borderColor;

                }




            }
          }

         .deductPointInfo,.getPointInfo{
            .displayFlex;
            .flex-direction-column;
            width:712px;
            padding: 0 24px;
            min-height:390px;
            border:1px solid @borderColor;
            border-radius: 6px;
            background-color: white;
            h1{
              font-size: 18px;
              margin-top: 22px;
              font-weight: normal;
              margin-bottom: 28px;
            }
            p{

              width: 100%;
              font-size: 14px;
              margin-bottom: 24px;
              color:@4aviceWordColor;
              i{
                color:@safeMinorColor;
              }
              span{
                display: block;
                width: 80px;
                height: 24px;
                border:1px solid @safeMinorColor;
                border-radius: 4px;
                color: @safeMinorColor;
                font-size: 16px;
                .flex-justify-align;
                cursor: pointer;

                .hover(@safeMinorColor);
              }

              .spanC{
                color: @99minorWordColor;
                border:1px solid @99minorWordColor;

              }
            }
          }


        }




        //**********
        //**********
        //***********基本信息
        .userBaseInfo{
          .displayFlex;
          .flex-direction-column;
          .userImgNameSex{
            .displayFlex;
            .flex-direction-row;
            .userImgTxt{
              .displayFlex;
              .flex-direction-column;
              .flex-justify-align;
              position: relative;

              img{
                .w_h(180px);
                border-radius: 6px;
              }
              p{
                font-size: 16px;
                color:@4aviceWordColor;
                margin-top: 12px;
              }
              input{
                position: absolute;
                top: 0;
                left: 0;
                .w_h(180px);
                border-radius: 6px;
                opacity: 0;
                cursor: pointer;
              }
            }
            .inputText{
              margin-right: 40px;
              .displayFlex;
              .flex-direction-column;
              label{
                .displayFlex;
                .flex-direction-row;
                .flex-align-items;
                margin-bottom: 20px;
                margin-top: 24px;
                span{
                  font-size:16px;
                  color:@99minorWordColor;
                  margin-left: 20px;
                }
                input{
                  width: 322px;
                  height: 48px;
                  padding-left: 30px;
                  border:1px solid @borderColor;
                  border-radius: 6px;
                  font-size:16px;

                }
                select{
                  width: 355px;
                  height: 48px;
                  padding-left: 30px;
                  border:1px solid @borderColor;
                  border-radius: 4px;
                  font-size:16px;

                }

              }
            }


          }
          .enterUp{
            width: 110px;
            height: 40px;
            border-radius: 4px;
            border:1px solid @safeMinorColor;
            color: @safeMinorColor;
            margin-top: 36px;
            .hover(@safeMinorColor);
          }


        }

        //**********
        //**********
        //***********帖子样式

        .userPostList{
          width: 100%;
          .groupListItem{

            .displayFlex;
            .flex-direction-column;
            border:1px solid @borderColor;
            padding: 24px 24px 24px 24px;
            border-radius: 6px;
            cursor: pointer;
            margin-bottom: 20px;


            //用户信息
            .authorInfo{
              .displayFlex;
              .flex-direction-row;
              margin-bottom: 10px;
              .info{
                .displayFlex;
                .flex-direction-row;
                img{
                  display: block;
                  .w_h(36px);
                  margin-right: 20px;
                  border-radius: 6px;
                }
                .infoText{
                  .displayFlex;
                  .flex-direction-row;
                  .text{
                    .userName{
                      font-size: 16px;
                      color: @25mainWordColor;
                    }
                    time{
                      font-size: 12px;
                      color: @99minorWordColor;
                    }

                  }
                }
              }

            }
            time{
              font-size: 12px;
              color: @99minorWordColor;
              margin-bottom: 15px;
            }
            //帖子内容
            .postContent{
              .postTitle{
                font-size: 18px;
                color: @25mainWordColor;
                margin-bottom: 10px;

              }
              .userText{
                font-size: 16px ;
                color: @4aviceWordColor;
                display: inline;

              }
              .adminText{
                .displayFlex;
                .flex-direction-row;
                img{
                  width: 218px;
                  height: 144px;
                  border-radius: 6px;
                  margin-right: 12px;
                }
                p{
                  width: 480px;

                }

              }
              a{
                font-size: 14px;
                color: @safeMinorColor;
                padding-right: 7px;
                background: url("../publicImg/jiantou-you-hong@2x.png") no-repeat right;
                background-size: 6px 12px;
                display: inline;
              }


            }
            //用户图片
            .postImg{

              width: 635px;
              margin-top: 20px;
              .imgList{
                .displayFlex;
                .flex-direction-row;
                li{
                  margin-right: 10px;
                  position: relative;
                  overflow: hidden;
                  .w_h(140px);
                  border-radius: 6px;

                  img{

                    position: absolute;
                    left: 50%;
                    top: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    -o-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);

                  }
                }
              }


            }

            //帖子交互信息
            .postInfo{
              .displayFlex;
              .flex-direction-row;
              margin-top: 20px;
              position: relative;
              span{
                padding-left:20px ;
                color: @99minorWordColor;
                font-size: 14px;
                margin-right: 16px;
              }
              span:nth-child(1){
                background: url("../publicImg/shequ-dianzan-pre@2x.png") no-repeat left;
                background-size: 16px 16px;
              }
              span:nth-child(2){
                background: url("../publicImg/shequ-liulan@2x.png") no-repeat left;
                background-size: 16px 16px;
              }
              span:nth-child(3){
                background: url("../publicImg/shequ-pinglun@2x.png") no-repeat left;
                background-size: 16px 16px;
              }

              .groupName{
                font-size: 14px;
                color: @safeMinorColor;
                margin-bottom: 30px;
                position: absolute;
                top: 0;
                right: 0;
              }

            }



          }

        }

        //**********
        //**********
        //***********评论样式
        .userCommentList{
          width: 100%;

          .commentItem{
            .displayFlex;
            .flex-direction-column;
            border:1px solid @borderColor;
            padding: 24px 24px 24px 24px;
            border-radius: 6px;
            cursor: pointer;
            margin-bottom: 20px;
            .myComment{
              time{
                font-size: 12px;
                color: @99minorWordColor;
                margin-bottom: 10px;
                display: block;
              }
              //评论内容
              .postContent{

                .postTitle{
                  font-size: 18px;
                  color: @25mainWordColor;
                  margin-bottom: 10px;

                }
                .userText{
                  font-size: 16px ;
                  color: @4aviceWordColor;
                  display: inline;

                }
                .adminText{
                  .displayFlex;
                  .flex-direction-row;
                  img{
                    width: 218px;
                    height: 144px;
                    border-radius: 6px;
                    margin-right: 12px;
                  }
                  p{
                    width: 420px;

                  }

                }
                a{
                  font-size: 14px;
                  color: @safeMinorColor;
                  padding-right: 7px;
                  background: url("../publicImg/jiantou-you-hong@2x.png") no-repeat right;
                  background-size: 6px 12px;
                  display: inline;
                }


              }
              //评论图片
              .postImg{

                width: 635px;
                margin-top: 20px;
                .imgList{
                  .displayFlex;
                  .flex-direction-row;
                  li{
                    margin-right: 10px;
                    position: relative;
                    overflow: hidden;
                    .w_h(140px);
                    border-radius: 6px;

                    img{

                      position: absolute;
                      left: 50%;
                      top: 50%;
                      -webkit-transform: translate(-50%, -50%);
                      -moz-transform: translate(-50%, -50%);
                      -ms-transform: translate(-50%, -50%);
                      -o-transform: translate(-50%, -50%);
                      transform: translate(-50%, -50%);

                    }
                  }
                }


              }

              margin-bottom: 24px;
            }


            //
            //
            //被评论的帖子样式
            .postItem{

              .displayFlex;
              .flex-direction-column;
              border:1px solid @borderColor;
              padding: 24px 0 24px 24px;
              border-radius: 6px;
              cursor: pointer;
              margin-bottom: 20px;

              background: #f6f6f6;

              //用户信息
              .authorInfo{
                .displayFlex;
                .flex-direction-row;
                margin-bottom: 10px;
                .info{
                  .displayFlex;
                  .flex-direction-row;
                  img{
                    display: block;
                    .w_h(36px);
                    margin-right: 20px;
                    border-radius: 6px;
                  }
                  .infoText{
                    .displayFlex;
                    .flex-direction-row;
                    .text{
                      .userName{
                        font-size: 16px;
                        color: @25mainWordColor;
                      }
                      time{
                        font-size: 12px;
                        color: @99minorWordColor;
                      }

                    }
                  }
                }

              }
              //帖子内容
              .postContent{
                margin-left: 55px;
                width: 635px;
                .postTitle{
                  font-size: 18px;
                  color: @25mainWordColor;
                  margin-bottom: 10px;

                }
                .userText{
                  font-size: 16px ;
                  color: @4aviceWordColor;
                  display: inline;

                }
                .adminText{
                  .displayFlex;
                  .flex-direction-row;
                  img{
                    width: 218px;
                    height: 144px;
                    border-radius: 6px;
                    margin-right: 12px;
                  }
                  p{
                    width: 380px;

                  }

                }
                a{
                  font-size: 14px;
                  color: @safeMinorColor;
                  padding-right: 7px;
                  background: url("../publicImg/jiantou-you-hong@2x.png") no-repeat right;
                  background-size: 6px 12px;
                  display: inline;
                }


              }
              //用户图片
              .postImg{
                margin-left: 55px;
                width: 635px;
                margin-top: 20px;
                .imgList{
                  .displayFlex;
                  .flex-direction-row;
                  li{
                    margin-right: 10px;
                    position: relative;
                    overflow: hidden;
                    .w_h(140px);
                    border-radius: 6px;

                    img{

                      position: absolute;
                      left: 50%;
                      top: 50%;
                      -webkit-transform: translate(-50%, -50%);
                      -moz-transform: translate(-50%, -50%);
                      -ms-transform: translate(-50%, -50%);
                      -o-transform: translate(-50%, -50%);
                      transform: translate(-50%, -50%);

                    }
                  }
                }


              }

              //帖子交互信息
              .postInfo{
                .displayFlex;
                .flex-direction-row;
                margin-top: 20px;
                margin-left: 55px;
                span{
                  padding-left:20px ;
                  color: @99minorWordColor;
                  font-size: 14px;
                  margin-right: 16px;
                }
                span:nth-child(1){
                  background: url("../publicImg/shequ-dianzan-pre@2x.png") no-repeat left;
                  background-size: 16px 16px;
                }
                span:nth-child(2){
                  background: url("../publicImg/shequ-liulan@2x.png") no-repeat left;
                  background-size: 16px 16px;
                }
                span:nth-child(3){
                  background: url("../publicImg/shequ-pinglun@2x.png") no-repeat left;
                  background-size: 16px 16px;
                }

                position: relative;
                .groupName{
                  font-size: 14px;
                  color: @safeMinorColor;
                  position: absolute;
                  top: 0;
                  right: 24px;
                }

              }


            }


          }


        }
        //**********
        //**********
        //***********详细信息

        .detailInfo{
          .displayFlex;
          .flex-direction-column;
          .tab{
            .displayFlex;
            .flex-direction-row;
            margin-bottom: 20px;

            span{
              font-size: 16px;
              color: @4aviceWordColor;
              margin: 0 15px;
            }
            .addcolor{
              color:@safeMinorColor;
            }


          }

          .infoBox{
            .displayFlex;
            .flex-direction-column;
            border: 1px solid @borderColor;
            border-radius: 6px;
            height: 518px;
            width: 760px;
            padding-top: 40px;
            div{

              .displayFlex;
              .flex-direction-row;
              .flex-align-items;
              margin-left: 128px;
              margin-bottom: 30px;
              p{
                display: block;
                width: 200px;
                font-size: 18px;
                color: @99minorWordColor;
              }
              input{
                width: 326px;
                padding-left: 28px;
                height: 38px;
                border:1px solid @borderColor;
                border-radius: 4px;
                color: @4aviceWordColor;

              }
              select{
                display: block;
                width: 354px;
                height: 38px;
                border:1px solid @borderColor;
                border-radius: 4px;
                text-indent: 28px;

               background-color: white;
                color:#dddddd;
              }



              input::-webkit-input-placeholder{
                color:#ddd;
              }
              input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:#ddd;
              }
              input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:#ddd;
              }
              input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
                color:#ddd;
              }


            }

          }

          .detailInfoBtn{
            margin-top: 40px;
            width: 110px;
            height: 38px;
            border:1px solid @safeMinorColor;
            color:@safeMinorColor;
            border-radius: 4px;
            .hover(@safeMinorColor);

          }






        }
        //**********
        //**********
        //***********修改密码

        .part1{
          .phoneBox,.codeBox{
            .displayFlex;
            .flex-direction-row;
            .flex-align-items;
            img{
              display: block;
              margin-right: 20px;
              height: 29px;
              width: 21px;

            }

          }
          .phoneBox{
            input{
              width: 354px;
              height: 38px;
              font-size: 18px;
              color: @4aviceWordColor;
              border-radius: 4px;
              border:1px solid @borderColor;
              text-indent: 28px;
            }
            margin-bottom: 30px;
          }

          .codeBox{
            input{
              width: 216px;
              height: 38px;
              font-size: 18px;
              color: @4aviceWordColor;
              border-radius: 4px;
              border:1px solid @borderColor;
              text-indent: 28px;
              margin-right: 15px;
            }
            .getCode{
              width: 120px;
              height: 40px;
              background: @safeMinorColor;
              color: white;
              font-size: 16px;
              border-radius: 4px;
              .flex-justify-align;
              cursor:pointer;
            }
          }

          .next{
            width: 110px;
            height: 38px;
            border: 1px solid @safeMinorColor;
            color:@safeMinorColor;
            font-size: 16px;
            border-radius: 4px;
            margin-top: 40px;
            .hover(@safeMinorColor)
          }

        }



        .part2{
          .phoneBox,.codeBox{
            .displayFlex;
            .flex-direction-row;
            .flex-align-items;
            img{
              display: block;
              margin-right: 20px;
              height: 29px;
              width: 21px;

            }

          }
          .phoneBox{
            input{
              width: 354px;
              height: 38px;
              font-size: 18px;
              color: @4aviceWordColor;
              border-radius: 4px;
              border:1px solid @borderColor;
              text-indent: 28px;
            }
            margin-bottom: 30px;
          }

          .codeBox{
            input{
              width: 354px;
              height: 38px;
              font-size: 18px;
              color: @4aviceWordColor;
              border-radius: 4px;
              border:1px solid @borderColor;
              text-indent: 28px;
              margin-right: 15px;
            }

          }

          .next{
            width: 110px;
            height: 38px;
            border: 1px solid @safeMinorColor;
            color:@safeMinorColor;
            font-size: 16px;
            border-radius: 4px;
            margin-top: 40px;
            .hover(@safeMinorColor);

          }

        }





      }



    }
  }

}




















































































